<template>
    <div>
        <div>
            <el-button @click="onSave" :type="status === '0' ? 'primary' : 'success'">{{ status === '0' ? '编辑' : '保存' }}</el-button>
            <el-button @click="onCancel" type="warning" :disabled="status === '0'">取消</el-button>
        </div>
        <div v-show="status === '0'" class="mt-4 vditor-reset px-8 pb-16" v-markdown="data.content"></div>
        <div class="mt-8">
            <div v-show="status === '1'"  ref="newPost"></div>
        </div>
    </div>
</template>


<script>
import { defineComponent, ref, onMounted } from '@vue/composition-api';
import { findOne, addOrUpdate } from '@/api/taskHeader'
import "@/lute.min.js";
import Vditor from 'vditor';
import 'vditor/dist/index.css'
import router from '../../../router';
const lute = window.Lute.New();
export default defineComponent({
    directives: {
        markdown: {
            // 指令的定义
            inserted: function (el, binding) {
                el.innerHTML = lute.Md2HTML(binding.value)
                // Array.from(el.getElementsByClassName('vditor-task')).forEach(item => {
                //     item.children[0].removeAttribute('disabled')

                // })
            },
            update(el, binding) {
                el.innerHTML = lute.Md2HTML(binding.value)
                // Array.from(el.getElementsByClassName('vditor-task')).forEach(item => {
                //     item.children[0].removeAttribute('disabled')


                // })
            }
        }
    },

    setup() {
        const data = ref({})
        const loading = ref(false)
        function fetchData() {
            loading.value = true
            findOne({
                taskId: router.currentRoute.query.taskId
            }).then(res => {
                data.value = res.data
            }).finally(() => {
                loading.value = false
            })

        }
        fetchData()


        const newPost = ref(null)
        let contentEditor = null
        onMounted(() => {
            contentEditor = new Vditor(newPost.value, {
                toolbar: [
                    'emoji',
                    'headings',
                    'bold',
                    'italic',
                    'strike',
                    'link',
                    '|',
                    'list',
                    'ordered-list',
                    'check',
                    'outdent',
                    'indent',
                    '|',
                    'quote',
                    'line',
                    'code',
                    'inline-code',
                    'insert-before',
                    'insert-after',
                    '|',
                    'upload',
                    'record',
                    'table',
                    '|',
                    'undo',
                    'redo',
                    '|',
                    'edit-mode',
                    // 'content-theme',
                    // 'code-theme',
                    'export',
                    {
                        name: 'more',
                        toolbar: [
                            'fullscreen',
                            'both',
                            'preview',
                            'info',
                            'help',
                        ],
                    }],
                minHeight: 1200,
                width: 1400,
                preview: {
                    maxWidth: 1100
                },
                toolbarConfig: {
                    // pin: true,
                },
                upload: {
                    filename(name) {
                            return name
                        },
                    url: import.meta.env.VITE_UPLOAD_URL
                },
                cache: {
                    enable: false,
                },
                cdn: import.meta.env.VITE_BASE,
                after: () => {
                    // contentEditor.setValue('hello, Vditor + Vue!')
                },
            })
        })

        const status = ref('0')
        const saveLoading = ref(false)
        function onSave() {
            if (status.value === '0') {
                contentEditor.setValue(data.value.content)
                status.value = '1'
            } else {
                saveLoading.value = true
                const params = {
                    ...data.value
                }
                params.content = contentEditor.getValue()
                addOrUpdate(params).then(res => {
                    data.value.content = contentEditor.getValue()
                    data.value.id = res.data.id
                    status.value = '0'
                }).finally(() => {
                    saveLoading.value = false
                })
            }
        }

        function onCancel() {
            status.value = '0'
        }

        return {
            data,
            loading,
            newPost,
            status,

            onSave,
            onCancel,
            saveLoading,
        }
    }
})
</script>